<template>
<!-- 	<view class="status_bar">
	           
	</view>
	<view >
		<view class="box-bg">
			<uni-nav-bar shadow left-icon="left"  style="margin-top: 40rpx;" leftText="返回" rightText="新建提醒" title="提醒列表" @clickLeft="topLeftClick()" @clickRight="topRightClick()" />
		</view>
	</view> -->
	<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
	</view>
	<view class="content">
		<view v-if="current === 0">
			<!-- <uni-card :title="value.alertName" :extra="value" v-for="value in doingList ">
				<template v-slot:title>
									<uni-list>
										<uni-list-item  :show-switch="true" title="去跑步"/>
									</uni-list>
								</template>
									
									
					<uni-countdown :font-size="30" :day="1" :hour="2" :minute="30" :second="0" color="#FFFFFF" background-color="#007AFF" />
					<text class="uni-body">和朋友一起去跑步，锻炼一下</text>
			</uni-card> -->
			<uni-card title="" extra="" v-for="item in doingList ">
				<template v-slot:title>
					<uni-list>
						<uni-list-item  show-switch="true" clickable @click="clickItem(item)" :title="item.alertName" :note="item.alertRemark" @switchChange="switchChange" />
					</uni-list>
				</template>
				
				<uni-countdown font-size=20    @timeup="clickItem(item)"  :day="item.day" :hour="item.hour" :minute="item.minute" :second="item.second" color="#FFFFFF" background-color="#007AFF" />
			</uni-card>
		</view>
		<view v-if="current === 1">
			 
			<uni-card :title="item.alertName" :extra="item.alertRemark" v-for="item in doneList ">
				<uni-forms-item label="时间:" >
					<text class="uni-body" style="line-height: 36px;">{{item.alertTime}}</text>
				</uni-forms-item>
				<uni-forms-item label="状态:" >
					<text class="uni-body" style="line-height: 36px;">完成</text>
				</uni-forms-item>
				<!-- <uni-forms-item label="已完成:" >
					<text class="uni-body" style="line-height: 36px;">￥:800</text>
				</uni-forms-item> -->
				<!-- <uni-forms-item label="未完成:" >
					<text class="uni-body" style="line-height: 36px;">￥:200</text>
				</uni-forms-item>
				<uni-forms-item label="今天:" >
					<uni-easyinput  placeholder="默认平均计算" value="50"/>
				</uni-forms-item> -->
			</uni-card>
			
		</view>
	
	</view>



				
				<uni-load-more iconType="circle" :status="status" />
							
					
				
				<uni-fab ref="fab" :pattern="pattern" :content="toolsContent" :horizontal="horizontal" :vertical="vertical"
							:direction="direction" @trigger="trigger"  @fabClick="topRightClick"/>
			
</template>

<script>
	import store from '@/store/index.js';//需要引入store
	export default {
			
			computed:{
				
				doingList(){
					
					
					return store.state.alert.doingList
				},
				doneList(){
					return store.state.alert.doneList
				},
				toolsContent(){
					return store.state.common.toolsContent
				},
			},
			components: {},
			onLoad() {
				//加载新闻通知数据
				store.dispatch('loadAlertData',{"pageNum":1,"pageSize":999})
				// uni.startPullDownRefresh();
				
				
			},
			data() {
				return {
					switchStatus:false,
				
					
					items: ['进行中', '已过期'],
									styles: [{
											value: 'button',
											text: '按钮',
											checked: true
										},
										{
											value: 'text',
											text: '文字'
										}
									],
									colors: ['#007aff', '#4cd964', '#dd524d'],
									current: 0,
									colorIndex: 0,
									activeColor: '#007aff',
									styleType: 'button',
					status: 'more',
									statusTypes: [{
										value: 'more',
										text: '加载前',
										checked: true
									}, {
										value: 'loading',
										text: '加载中',
										checked: false
									}, {
										value: 'noMore',
										text: '没有更多',
										checked: false
									}],
									contentText: {
										contentdown: '查看更多',
										contentrefresh: '加载中',
										contentnomore: '没有更多'
									},
					cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
					avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
					extraIcon:{
						color: '#4cd964',
						size: '22',
						type: 'gear-filled'
					},
					title: 'uni-fab',
					directionStr: '垂直',
					horizontal: 'right',
					vertical: 'bottom',
					direction: 'horizontal',
					pattern: {
						color: '#7A7E83',
						backgroundColor: '#fff',
						selectedColor: '#007AFF',
						buttonColor: '#007AFF',
						iconColor: '#fff'
					},
					is_color_type: false,
					
				}
			},
			mounted() {
					
					
					},
			methods: {
				
				clickItem(item){
					store.dispatch('editAlertData',{"id":item.id,"status":1}).then(() => {
						uni.showToast({
							title: "提醒已关闭"
						})
											
						
					})
					
						
					
				},
				switchChange(e){
					console.log("swichStatus:"+this.$data.switchStatus);
					console.log("swichStatus:"+this.$data.switchStatus);
					this.$data.switchStatus=e.value
					console.log("swichStatus:"+this.$data.switchStatus);
					
				},
				onClickItem(e) {
					if (this.current !== e.currentIndex) {
						this.current = e.currentIndex
					}
				},
				
				trigger(e) {
					
					this.toolsContent[e.index].active = !e.item.active
					store.dispatch('toolsJump',e.item.value)
				},
				
				clickLoadMore(e) {
					uni.showToast({
						icon: 'none',
						title: "当前状态：" + e.detail.status
					})
				},
				
				topRightClick(){
					uni.redirectTo({
						url:"/pages/alert/createAlert"
					})
				},
			}
		}
</script>

<style>
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }
.container {
		overflow: hidden;
	}

	.custom-cover {
		flex: 1;
		flex-direction: row;
		position: relative;
	}

	.cover-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 40px;
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 15px;
		font-size: 14px;
		color: #fff;
	}

	.card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		height: 45px;
		border-top: 1px #eee solid;
	}

	.card-actions-item {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.card-actions-item-text {
		font-size: 12px;
		color: #666;
		margin-left: 5px;
	}

	.cover-image {
		flex: 1;
		height: 150px;
	}

	.no-border {
		border-width: 0;
	}
</style>